<template>
  <div class="container">
    <div>
      <div>
        <span @click="$router.back(-1)"
              class="back">返回列表</span> > {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>

    <div class="container-body"
         v-loading="loading">

      <template v-if="!waveLength">
        <div class="title-space">
          <span>OD值：</span>
        </div>
        <table id="table-1"
               width="100%"
               v-for="(listItem,listIndex) in originalData">

          <tr v-for="(table,key,index) in listItem"
              :key="index">
            <td class="color-000">{{key!=='time'?key:'孔'}}</td>
            <td>
              <span v-if="key!=='time'">
                {{crpValue[index-1]}}
              </span>
              <span class="color-000"
                    v-else>
                待测物浓度(ug/ml)
              </span>
            </td>
            <td v-for="iTable in table">
              <span v-if="key!=='time'">{{iTable}}</span>
              <span class="color-000"
                    v-else>{{iTable + 's'}}</span>
            </td>
          </tr>
        </table>

        <div class="title-space">
          <span>OD值相对变化率（%）：</span>
        </div>
        <table id="table-1"
               width="100%"
               v-for="(listItem,listIndex) in originalDataRate">

          <tr v-for="(table,key,index) in listItem"
              :key="index">
            <td class="color-000">{{key!=='time'?key:'孔'}}</td>
            <td>
              <span v-if="key!=='time'">
                {{crpValue[index-1]}}
              </span>
              <span class="color-000"
                    v-else>
                待测物浓度(ug/ml)
              </span>
            </td>
            <td v-for="iTable in table">
              <span v-if="key!=='time'">{{iTable}}</span>
              <span class="color-000"
                    v-else>{{iTable + 's'}}</span>
            </td>
          </tr>
        </table>

        <div class="space text-center">
          <div class="chart"
               v-for="(chart,index) in allStepOneCharts">
            <easyChart :id="'StepOne'+index"
                       :data='chart'></easyChart>
          </div>
        </div>

        <div class="space">
          <div class="title-space">
            <span>光强值：</span>
          </div>
          <table id="table-1"
                 width="100%"
                 v-for="lightValueItem in lightValue">
            <tr v-for="(table,key,index) in lightValueItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:'孔'}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{crpValue[index-1]}}
                </span>
                <span class="color-000"
                      v-else>
                  待测物浓度(ug/ml)
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>

          <div class="space">
            <div class="title-space">
              <span>光强相对变化率（%）： </span>
            </div>
            <table id="table-1"
                   width="100%"
                   v-for="lightRateItem in lightRate">
              <tr v-for="(table,key,index) in lightRateItem"
                  :key="index">
                <td class="color-000">{{key!=='time'?key:'孔'}}</td>
                <td>
                  <span v-if="key!=='time'">
                    {{crpValue[index-1]}}
                  </span>
                  <span class="color-000"
                        v-else>
                    待测物浓度(ug/ml)
                  </span>
                </td>
                <td v-for="iTable in table">
                  <span v-if="key!=='time'">{{iTable}}</span>
                  <span class="color-000"
                        v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </div>

          <div class="space text-center">
            <div class="chart"
                 v-for="(chart,index) in allLightRateCharts">
              <easyChart :id="'logLightRate'+index"
                         :data='chart'></easyChart>
            </div>
          </div>
        </div>

        <div class="title-space">
          <span>计算结果：</span>
          <el-button type="text"
                     @click="downloadExl()"
                     size="mini">导出表格</el-button>
        </div>

        <div class="title-space">
          <span>待测物{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div>

        <div class="space">
          <table id="table-1"
                 width="100%"
                 v-for="stepTwoItem in stepTwoList">
            <tr v-for="(table,key,index) in stepTwoItem"
                :key="index">
              <td class="color-000">
                <span v-if="key!=='time'">{{key}}</span>
                <span v-else>孔</span>
              </td>
              <td v-for="iTable in table"
                  v-if="key ==='time'"
                  class="color-000">
                <span v-if="iTable==='ka'"
                      v-html="equation1"> </span>
                <span v-else-if="iTable==='Kd'"
                      v-html="equation2"> </span>
                <span v-else-if="iTable==='KD'"
                      v-html="equation3"> </span>
                <span v-else>{{iTable}}</span>
              </td>
              <td v-for="iTable in table"
                  v-if="key !=='time'">
                {{iTable}}
              </td>
            </tr>
          </table>
        </div>
      </template>

      <template v-for="waveLengthV,waveLengthIndex in waveLength"
                v-else>
        <!---------------- wave ------------------>

        <div class="title-space">
          <span>{{waveLengthV}}-OD值：</span>
        </div>

        <template v-for="(listItem,listIndex) in originalData">
          <table id="table-1"
                 width="100%"
                 v-if="waveLengthIndex === listIndex">

            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:'孔'}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{crpValue[index-1]}}
                </span>
                <span class="color-000"
                      v-else>
                  待测物浓度(ug/ml)
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </template>

        <div class="title-space">
          <span>{{waveLengthV}}-OD值相对变化率（%）：</span>
        </div>
        <template v-for="(listItem,listIndex) in originalDataRate">
          <table id="table-1"
                 width="100%"
                 v-if="waveLengthIndex === listIndex">
            <tr v-for="(table,key,index) in listItem"
                :key="index">
              <td class="color-000">{{key!=='time'?key:'孔'}}</td>
              <td>
                <span v-if="key!=='time'">
                  {{crpValue[index-1]}}
                </span>
                <span class="color-000"
                      v-else>
                  待测物浓度(ug/ml)
                </span>
              </td>
              <td v-for="iTable in table">
                <span v-if="key!=='time'">{{iTable}}</span>
                <span class="color-000"
                      v-else>{{iTable + 's'}}</span>
              </td>
            </tr>
          </table>
        </template>

        <div class="space text-center">
          <template v-for="(chart,index) in allStepOneCharts">
            <div class="chart"
                 v-if="waveLengthIndex === index">
              <easyChart :id="'StepOne'+index"
                         :data='chart'></easyChart>
            </div>
          </template>
        </div>

        <div class="space">
          <div class="title-space">
            <span>{{waveLengthV}}-光强值：</span>
          </div>

          <template v-for="lightValueItem,lightIndex in lightValue">
            <table id="table-1"
                   width="100%"
                   v-if="waveLengthIndex === lightIndex">
              <tr v-for="(table,key,index) in lightValueItem"
                  :key="index">
                <td class="color-000">{{key!=='time'?key:'孔'}}</td>
                <td>
                  <span v-if="key!=='time'">
                    {{crpValue[index-1]}}
                  </span>
                  <span class="color-000"
                        v-else>
                    待测物浓度(ug/ml)
                  </span>
                </td>
                <td v-for="iTable in table">
                  <span v-if="key!=='time'">{{iTable}}</span>
                  <span class="color-000"
                        v-else>{{iTable + 's'}}</span>
                </td>
              </tr>
            </table>
          </template>

          <div class="space">
            <div class="title-space">
              <span>{{waveLengthV}}-光强相对变化率（%）： </span>
            </div>

            <template v-for="lightRateItem,lightRateIndex in lightRate">
              <table id="table-1"
                     width="100%"
                     v-if="waveLengthIndex === lightRateIndex">
                <tr v-for="(table,key,index) in lightRateItem"
                    :key="index">
                  <td class="color-000">{{key!=='time'?key:'孔'}}</td>
                  <td>
                    <span v-if="key!=='time'">
                      {{crpValue[index-1]}}
                    </span>
                    <span class="color-000"
                          v-else>
                      待测物浓度(ug/ml)
                    </span>
                  </td>
                  <td v-for="iTable in table">
                    <span v-if="key!=='time'">{{iTable}}</span>
                    <span class="color-000"
                          v-else>{{iTable + 's'}}</span>
                  </td>
                </tr>
              </table>
            </template>
          </div>

          <div class="space text-center">
            <template v-for="(chart,index) in allLightRateCharts">
              <div class="chart"
                   v-if="waveLengthIndex === index">
                <easyChart :id="'logLightRate'+index"
                           :data='chart'></easyChart>
              </div>
            </template>
          </div>

        </div>

        <div class="title-space">
          <span>计算结果：</span>
          <el-button type="text"
                     @click="downloadExl()"
                     size="mini">导出表格</el-button>
        </div>

        <div class="title-space">
          <span>{{waveLengthV}}-待测物{{$t('page.molecular')}}（Da）：</span>
          {{mole}}
        </div>

        <div class="space">
          <template v-for="stepTwoItem,stepTwoIndex in stepTwoList">
            <table id="table-1"
                   width="100%"
                   v-if="waveLengthIndex === stepTwoIndex">
              <tr v-for="(table,key,index) in stepTwoItem"
                  :key="index">
                <td class="color-000">
                  <span v-if="key!=='time'">{{key}}</span>
                  <span v-else>孔</span>
                </td>
                <td v-for="iTable in table"
                    v-if="key ==='time'"
                    class="color-000">
                  <span v-if="iTable==='ka'"
                        v-html="equation1"> </span>
                  <span v-else-if="iTable==='Kd'"
                        v-html="equation2"> </span>
                  <span v-else-if="iTable==='KD'"
                        v-html="equation3"> </span>
                  <span v-else>{{iTable}}</span>
                </td>
                <td v-for="iTable in table"
                    v-if="key !=='time'">
                  {{iTable}}
                </td>
              </tr>
            </table>
          </template>
        </div>
      </template>

      <div class="wave"
           v-if="waveLength && Object.keys(waveLengthDiff).length">
        <div class="title-space">
          <span>波长差值：</span>
        </div>

        <template v-for="waveItem,waveKey,waveIndex in waveLengthDiff">
          <table id="table-1"
                 width="100%">
            <tr>
              <td class="color-000">
                浓度(ug/ml)
              </td>
              <td class="color-000">
                {{waveKey}}

              </td>
            </tr>
            <tr v-for="wave,wIndex in waveItem">
              <td>
                <span>
                  {{crpValue[wIndex]}}
                </span>
              </td>
              <td>
                {{wave}}
              </td>
            </tr>
          </table>
        </template>
        <template v-for="chart,index in waveCharts">
          <easyChart :id="'wave'+index"
                     :data='chart'></easyChart>
        </template>

      </div>

      <div class="space text-center">
      </div>

    </div>
  </div>
</template>

<script>
import easyChart from '@/components/EasyChart'
import { fetchHistoryDetail } from '@/api/table'
export default {
  data() {
    return {
      loading: true,
      stepTwoList: [],
      originalData: [],
      originalDataRate: [],
      lightValue: [],
      lightRate: [],
      allLightRateCharts: [],
      allStepOneCharts: [],
      waveLength: [],
      waveLengthDiff: {},
      waveCharts: [],
      exlName: '',
      mole: '',
      tableTop: [
        '待测物浓度(ug/ml)',
        '待测物饱和时光强变化率值',
        '拟合值a',
        '拟合值b',
        'ka',
        'Kd',
        'KD',
      ],
    }
  },
  components: {
    easyChart,
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    async getHistoryDetail() {
      const res = await fetchHistoryDetail({
        id: this.$route.query.id,
      })
      this.loading = false
      this.mole = res.data.mole
      this.originalData = JSON.parse(res.data.originalData)
      this.originalDataRate = JSON.parse(res.data.originalDataRate)
      this.lightValue = JSON.parse(res.data.lightValue)
      this.lightRate = JSON.parse(res.data.lightRate)
      this.crpValue = JSON.parse(res.data.crpValue)
      this.waveLength = JSON.parse(res.data.waveLength)
      this.waveLengthDiff = JSON.parse(res.data.waveLengthDiff)
      const info = JSON.parse(res.data.resultData)
      this.equation1 = `K<sub>a</sub>(10<sup>${info.unit[0][4]}</sup>M<sup>-1</sup>S<sup>-1</sup>)`
      this.equation2 = `K<sub>d</sub>(10<sup>${info.unit[0][5]}</sup>S<sup>-1</sup>)`
      this.equation3 = `K<sub>D</sub>(10<sup>${info.unit[0][6]}</sup>M)`
      info.data.forEach((item) => {
        item.time = this.tableTop
        //存入数组排序
        let arr = []
        for (let key in item) {
          if (key === 'time') {
            arr.unshift(key)
          } else {
            arr.push(key)
          }
        }
        //根据数组排序插入数据
        let newInfoData = {}
        for (let i in arr) {
          var itemKey = arr[i]
          newInfoData[itemKey] = item[itemKey]
        }
        this.stepTwoList.push(newInfoData)
      })
      this.exlName = info.fileName
      this.drawWaveChart()
      this.drawChart()
    },
    downloadExl() {
      const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
      window.open(href, '_blank')
    },
    drawWaveChart() {
      this.waveCharts = []
      for (let i in this.waveLengthDiff) {
        const waveChart = {
          title: {
            text: 'Tecan(' + i + ')5min',
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          xAxis: {
            type: 'category',
            data: this.crpValue,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: this.waveLengthDiff[i],
              barWidth: '60%',
              type: 'bar',
            },
          ],
        }
        this.waveCharts.push(waveChart)
      }
    },
    drawChart() {
      this.allLightRateCharts = []
      this.allStepOneCharts = []
      this.lightRate.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: '',
          },
          animation: false,
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: [],
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'empty',
            },
            {
              type: 'slider',
              yAxisIndex: 0,
              filterMode: 'empty',
            },
          ],
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
            },
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [],
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        for (let i in item) {
          if (i !== 'time') {
            let chartSeries = {
              name: `${this.crpValue[num]}ug/ml`,
              type: 'line',
              smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            }
            chartsOption.title.text = '光强相对变化率曲线'
            chartsOption.legend.data.push(`${this.crpValue[num]}ug/ml`)
            chartsOption.series.push(chartSeries)
            num++
          } else {
            chartsOption.xAxis.data = item[i]
          }
        }
        this.allLightRateCharts.push(chartsOption)
      })
      this.originalDataRate.forEach((item, index, arry) => {
        let chartsOption = {
          title: {
            text: '',
          },
          animation: false,
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: [],
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'empty',
            },
            {
              type: 'slider',
              yAxisIndex: 0,
              filterMode: 'empty',
            },
          ],
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            boundaryGap: false,
            minInterval: 120,
            data: [],
          },
          yAxis: {
            type: 'value',
            // minInterval: 0.1
            // min: value => {
            //   return value.min;
            // }
          },
          series: [],
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        for (let i in item) {
          if (i !== 'time') {
            let chartSeries = {
              name: `${this.crpValue[num]}ug/ml`,
              type: 'line',
              smooth: true,
              showSymbol: false,
              hoverAnimation: false,
              data: item[i],
            }
            chartsOption.title.text = 'OD值相对变换率曲线'
            chartsOption.legend.data.push(`${this.crpValue[num]}ug/ml`)
            chartsOption.series.push(chartSeries)
            num++
          } else {
            chartsOption.xAxis.data = item[i]
          }
        }
        this.allStepOneCharts.push(chartsOption)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
</style>